import Vue from "vue";
import $ from "jquery";
import prizes from "./prizes";

Vue.directive('wipe', {
    inserted: function (el, binding, vnode) {
        const {value: _obj} = binding
        const {context: _this, data} = vnode
        if (_this && _this._isVue) {
            let upCanvas = el;
            let callback1, callback2, callback3, callback4;
            let ctx = upCanvas.getContext("2d");
            ctx.fillStyle = "#cdced0";
            ctx.fillRect(0, 0, upCanvas.width, upCanvas.height);
            ctx.globalCompositeOperation = 'destination-out';
            upCanvas.addEventListener("mousedown", callback1 = function (evt) {
                upCanvas.addEventListener("mousemove", callback2 = function (evt) {
                    let x = evt.clientX - $(upCanvas).offset().left;
                    let y = evt.clientY - $(upCanvas).offset().top;
                    ctx.beginPath();
                    let gradient = ctx.createRadialGradient(x, y, 0, x, y, 14);
                    // 其实这边的颜色值是可以随便写的，因为都会变成透明，重要的是透明度
                    gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
                    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
                    // 也可以不用渐变，直接用一种颜色，但渐变效果更好
                    ctx.fillStyle = gradient;
                    ctx.arc(x, y, 14, 0, Math.PI * 2, true);
                    ctx.fill();
                    ctx.closePath();
                }, {passive: false});
                document.addEventListener("mouseup", callback3 = function () {
                    upCanvas.removeEventListener("mousemove", callback2);
                    document.removeEventListener("mouseup", callback3);
                }, {passive: false});
            }, {passive: false});
            upCanvas.addEventListener("touchstart", callback1 = function (evt) {
                upCanvas.addEventListener("touchmove", callback2 = function (evt) {
                    // document.body.addEventListener('touchmove', callback4 = function (e) {
                    //     e.preventDefault();
                    // }, {passive: false});
                    const touch = evt.touches[0];
                    let x = touch.pageX - $(upCanvas).offset().left;
                    let y = touch.pageY - $(upCanvas).offset().top;
                    ctx.beginPath();
                    let gradient = ctx.createRadialGradient(x, y, 0, x, y, 14);
                    // 其实这边的颜色值是可以随便写的，因为都会变成透明，重要的是透明度
                    gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
                    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
                    // 也可以不用渐变，直接用一种颜色，但渐变效果更好
                    ctx.fillStyle = gradient;
                    ctx.arc(x, y, 14, 0, Math.PI * 2, true);
                    ctx.fill();
                    ctx.closePath();
                }, {passive: false});
                document.addEventListener("touchend", callback3 = function () {
                    upCanvas.removeEventListener("touchmove", callback2);
                    // document.body.removeEventListener("touchmove", callback4);
                    document.removeEventListener("touchend", callback3);
                }, {passive: false});
            }, {passive: false});
        }
    }
});

Vue.directive('draw', {
    inserted: function (el, binding, vnode) {
        const {value: _obj} = binding
        const {context: _this, data} = vnode
        // const {expression: key} = data.model
        if (_this && _this._isVue) {
            let underCanvas = el;
            let ctx = underCanvas.getContext("2d");
            const text = {
                fontWeight: "bold",
                fontSize: 16,
                fontFamily: "Arial",
                align: "center",
                color: '#ffde5b'
            };
            ctx.font = text.fontWeight + " " + text.fontSize + 'px ' + text.fontFamily;
            ctx.textAlign = text.align;
            ctx.fillStyle = text.color;
            const prizeList = prizes.list;
            const award = prizeList[(Math.random() * prizeList.length) | 0]; //随机抽奖
            ctx.fillText(award, underCanvas.width / 2, underCanvas.height / 2 + text.fontSize / 2);
        }
    }
});